import { Card, Descriptions, Space } from 'antd';
import DescriptionsItem from 'antd/es/descriptions/Item';

interface DatabaseDescProps {
  database: Bn.Meta.MetaDatabase;
}

const DatabaseDesc = ({ database }: DatabaseDescProps) => {
  return (
    <Card style={{ width: '100%' }}>
      <Space
        direction="vertical"
        size={'middle'}
      >
        <Descriptions
          title="基础信息"
          column={2}
        >
          <DescriptionsItem
            key={1}
            label={'数据源名称'}
          >
            {database?.friendlyName}
          </DescriptionsItem>
          <DescriptionsItem
            key={2}
            label={'类型'}
          >
            {database?.dbType}
          </DescriptionsItem>
          <DescriptionsItem
            key={3}
            label={'描述'}
            span={2}
          >
            {database?.comment}
          </DescriptionsItem>
          <DescriptionsItem
            key={4}
            label={'主机名/IP地址'}
          >
            {database?.hostName}
          </DescriptionsItem>
          <DescriptionsItem
            key={5}
            label={'端口'}
          >
            {database?.port}
          </DescriptionsItem>
          <DescriptionsItem
            key={6}
            label={'数据库名称'}
          >
            {database?.dbName}
          </DescriptionsItem>
          <DescriptionsItem
            key={7}
            label={'用户名'}
          >
            {database?.userName}
          </DescriptionsItem>
          <DescriptionsItem
            key={8}
            label={'额外的 JDBC 连接字符串'}
            span={2}
          >
            {database?.jdbcParams}
          </DescriptionsItem>
        </Descriptions>
        <Descriptions
          title="SSH 设置"
          column={2}
        ></Descriptions>
        <Descriptions
          title="高级设置"
          column={2}
        >
          <DescriptionsItem
            key={10}
            label={'初始连接数'}
          >
            {database?.friendlyName}
          </DescriptionsItem>
          <DescriptionsItem
            key={11}
            label={'最小连接数'}
          >
            {database?.dbType}
          </DescriptionsItem>
          <DescriptionsItem
            key={12}
            label={'最大连接数'}
          >
            {database?.comment}
          </DescriptionsItem>
          <DescriptionsItem
            key={13}
            label={'查询超时'}
          >
            {database?.hostName}
          </DescriptionsItem>
        </Descriptions>
      </Space>
    </Card>
  );
};

export default DatabaseDesc;
